<template>
  <div class="homefloor">
    <div class="floor-item" v-for="item in messages" :key="item.id">
      <div class="tab">
        <img :src="item.floor_title.image_src" alt="">
      </div>
      <div class="content">
        <div class="content-item" v-for="product in item.product_list" :key="product.id">
          <img :src="product.image_src" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'HomeFloor',
  props:{
    messages:{
      type:Array,
      default(){
        return []
      }
    }
  }
}
</script>

<style scoped>
.floor-item .tab{
  height: 30px;
  padding: 5px 0;
}
.floor-item .tab img{
  height: 100%;
}
.floor-item .content{
  overflow: hidden;
}
.floor-item .content .content-item:nth-child(1){
  height: 196px;
}
.floor-item .content .content-item:nth-child(2n-1){
  padding:0 5px 5px;
}
.floor-item .content .content-item{
  float: left;
  width: 33.33%;
  height: 98px;
  padding-bottom:5px;
  box-sizing: border-box;
}

.floor-item .content img{
  width: 100%;
  height: 100%;
}
</style>